<template>
    <div
        style="margin-right: 20px;width: 300px;display: flex;justify-content: center;flex-direction: column; align-items: center;">
        <Cropper :layer="layer" v-model="img" />
        <img :src="img && img.length !== 0 ? img : avatarUrl" @click="handlePreview"
            style="width: 200px; height: 200px; border-radius: 50%;">
        <div v-if="!props.is_edit" style="text-align: left;">
            <el-button v-if="!$store.state.user.isMobile" @click="showWindow" type="primary">上传头像</el-button>

            <el-button v-if="img !== $store.state.user.userIcon" @click="handleUpload" type="primary">保存头像</el-button>
        </div>
        <el-dialog v-model="dialogVisible">
            <img width="100%" :src="img && img.length !== 0 ? img : avatarUrl" alt="Preview Image" />
        </el-dialog>

    </div>

</template>

<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'

import { setAvatarApi, getAvatarApi } from "@/api/file"
import { useStore } from 'vuex'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import Cropper from '@/components/cropper/index.vue'

const props = reactive({
    is_edit: false
})

const layer = reactive({
    show: false,
    title: '图片上传'
})
const avatarUrl = computed(() => store.state.user.userIcon);
const store = useStore()

const dialogVisible = ref(false)
const img = ref(store.state.user.userIcon)
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogVisible.value = true
}
function showWindow() {
    layer.show = true
}
const formData2 = ref({
    avatar: '',
    user_id: store.state.user.user_id,
})
const handleUpload = () => {


    console.log("debug 1", img.value)
    if (!(img.value.startsWith('data:image/') || img.value.startsWith('image/'))) {
        ElMessage.error({ message: '请上传图片!', duration: 5000 })
        return false
    }

    formData2.value.avatar = String(img.value);
    setAvatarApi(formData2.value).then((response: any) => {
        if (response.code === 200) {
            ElMessage.success("上传头像成功");
            getAvatarApi({ user_id: store.state.user.user_id }).then((response: any) => {
                if (response.code === 200) {
                    store.commit('user/getUserAvatarUrl', response.data)
                }
                else console.log(response.msg)
            })
            setTimeout(() => { img.value = ''; }, 5000);
        } else {
            ElMessage.error("上传头像失败");
        }
    })

}

</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>